<template>
  <div class="oneBox">
    <div class="name">活动名称：{{name}}</div>
    <div class="activityData">
      <div class="bt">活动数据：</div>
      <el-table :data="statisticList" border style="width: 100%;margin-top:14px" >
        <el-table-column prop="buyAmount" align="center" label="购买数量" />
        <el-table-column prop="boxAmount" align="center" label="开启数量" />
        <el-table-column prop="customerAmount" align="center" label="参与人数" />
        <el-table-column prop="payCustomerAmount" align="center" label="支付人数" />
        <el-table-column prop="payMoney" align="center" label="支付金额" />
        <el-table-column prop="couponAmount" align="center" label="盲盒券使用数量" />
        <el-table-column prop="cocoAmount" align="center" label="CoCo使用数量" />
        <el-table-column prop="tfAmount" align="center" label="椰分使用数量" />
        <el-table-column prop="discountMoney" align="center" label="优惠金额" />
      </el-table>
    </div>
    <div class="activityData" >
      <div class="bt">盲盒奖品数据：</div>
      <div class="prizeBox">
          <!-- <div class="list" v-for="(item,index) in prizeList" :key="index">
            <div class="left">{{item.prizeName}}</div>
            <div class="right">{{item.amount}}</div>
          </div> -->
          <el-table :data="prizeList" border style="width: 100%;margin-top:14px" :show-summary="true">
            <el-table-column type="index" width="50" />
            <el-table-column prop="prizeName" align="center" label="奖品名称" />
            <el-table-column prop="amount" align="center" label="配置数量" />
            <el-table-column prop="used" align="center" label="已抽取数量" />
            <el-table-column prop="usable" align="center" label="剩余数量" />
          </el-table>
      </div>
      
    </div>
  </div>
</template>
<script>
import {
  statistic,

} from '@/api/blindBox/activityDetail'
export default {
  name: "shopDetail",
  components: {
    
  },
  props:{
    id: String,
  },
  data() {
    return {
      loading: false,
      statisticList:[],
      prizeList: [],
      name: '',
    };
  },
  watch: {
   
  },
  created() {
    console.log('id',this.id)
    this.getList()
  },
  mounted() {
  
  },
  methods: {
    /** 查询盲盒活动列表 */
      getList() {
        this.loading = true;
        statistic(this.id).then(response => {
          const {statistic ,prizeList, name} = response.result
          console.log('response',response)
          this.statisticList.push(statistic)
          this.prizeList = prizeList
          this.name = name
          // this.activityList = this.activityList.map(item => {
          //   // console.log('item',item)
          //   Object.keys(item).forEach(key => {
          //     if (item[key] === '') {
          //       item[key] = '- -'

          //     }
          //   })
          //   console.log('item',item)
          //   return item
          // })
          this.loading = false;
        });
      },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}
.name{
  padding: 14px 0 0 0 ;
  font-size: 16px;
  color: #222;
}
.activityData{
  margin-top: 24px;
  .bt{
    font-size: 16px;
    color: #222;
  }
}
.prizeBox{
  width: 900px;
  margin-top: 20px;
  .list{
    border: 1px solid #dfe6ec;
    width: 480px;
    height: 46px;
    display: flex;
    justify-content: flex-end;
    color: #606266;
    .right{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #dfe6ec;
      height: 100%;
    }
    .left{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      flex: 1;
    }
  }
}
</style>
